iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
Modern Web

從零開始的個人化記帳程式開發系列 第 20

記帳程式 (20):支出紀錄的新增、修改、刪除 feat. Firestore

  • 分享至 

  • xImage
  •  

熟悉的標題,最對味。不加一下天數都快忘了自己寫到哪一天了。 /images/emoticon/emoticon01.gif

昨天成功將 Firestore 引入原本的記帳程式後,今天要回頭繼續把前面因為沒有 API 還沒搞定的支出紀錄做完,這兩天透過基本的 CRUD 實際操作 Firestore 練習。

新增

在 store 底下加一個 addExpense 的 action:

addExpense({ dispatch }, expenseObj) {
  return new Promise((resolve, reject) => {
    db.collection('expense')
      .add({ ...expenseObj })
      .then(() => {
        dispatch('getExpenseData')
        resolve()
      })
      .catch(error => reject(error))
  })
},

新增的寫法比較單純,就是利用 db.collection('expense').add() 來在 Firestore 中,新增一個文件。

至於這邊更新的寫法較偷懶,直接再打一次拿資料的 API 而已。比較好的寫法應該還是要新增後取得新增文件亂數產生的 ID,並將原本傳過來的新資料 expenseObj 用 mutation 塞到 state 中,減少一次的 request。

實際操作後可以到畫面上測試:

從上面可以看到操作後,支出列表成功新增了一筆支出紀錄,再到 Firestore 確認的確有寫入資料庫:

第一步成功地記錄了一筆 美國 Prime 衫河農場濕式熟成 45 天叻眼牛排 12oz 的支出紀錄呢!/images/emoticon/emoticon24.gif

編輯

編輯就稍微複雜一點,需要在原本支出列表的每一列中都紀錄有 Firestore 文件的 ID,所以先修改原本取得資料的 action:

getExpenseData({ commit }) {
  return new Promise((resolve, reject) => {
    db.collection('expense')
      .get()
      .then(querySnapshot => {
        const documents = querySnapshot.docs.map(doc => {
          return {
            ...doc.data(),
            id: doc.id
          }
        })
        commit('SET_EXPENSE_DATA', documents)
        resolve()
      })
      .catch(error => reject(error))
  })
},

上面這邊可以注意到在整理資料時,從 querySnapshot.docs 這個陣列中可以取得每一個文件的 ID,這邊也一併塞在整個支出陣列資料的每個物件中。

取得 ID 後,要做編輯這個動作就相對單純了,一樣是加上一個 action,並將其中 Firestore 的操作改為 db.collection('expense').doc(id).update({...expenseObj}) 即可。

一樣分別在畫面上測試一下,並到 Firestore 確認是否有成功更新:

刪除

刪除可以說是裡面最簡單的,因為前面也準備好 ID 了,所以就是刪掉特定 ID 的文件即可:

deleteExpense({ dispatch }, id) {
  return new Promise((resolve, reject) => {
    db.collection('expense')
      .doc(id)
      .delete()
      .then(() => {
        dispatch('getExpenseData')
        resolve()
      })
      .catch(error => reject(error))
  })
}

一樣分別在畫面上測試一下,並到 Firestore 確認是否有成功更新:

這邊另外再加上一個確認的對話框來防止誤按。

今日原始碼

以上就是今天以支出紀錄為例,操作 Firestore 新增、編輯、刪除的實作,可以說是結合前面 Firestore 基本語法及原本記帳程式的例子來實際練習。

若有講的不詳細的地方可以參考以下的程式碼:

後記

實際把 Firestore 應用在原本的專案中後,真心覺得這是一個做前端 side project 很方便的服務,操作的 API 也不難懂,省略了要自己弄 SQL 的麻煩。

今天就先到這啦,也剩下十篇了呢,看起來離順利完賽之路不遠了!


上一篇
Vue 專案串接 Firestore 資料
下一篇
記帳程式 (21):專案開發 Part.1 - 全站 layout 畫面優化
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言